<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>roc-icon-plus - uniapp</title>
    <link rel="stylesheet" href="./css/fontawesome-free-6.5.1-web/css/all.min.css" />
    <link rel="stylesheet" href="./css/common.css">
  </head>
  <body>
    <div id="app">
      <div class="nav-box">
        <p>风格目录：</p>
        <a href="#fas">solid(实心)</a>
        <a href="#fab">brands(品牌)</a>
      </div>
      <div class="desc">
        <h1>roc-icon-plus（uniapp）</h1>
        <p>基于 fontawesome-free-6.5.1 ，fontawesome免费版本可用三种风格，分别为: solid（fas 实心），regular（far 常规），brands（fab 品牌）。</p>
        <p>所有图标都有实心风格，常规风格的图标只包含了一小部分，不是所有的图标都有regular风格的版本。</p>
        <p>solid（fas 实心）: {{ fasClassList.length }} 个</p>
        <p>brands（fab 品牌）: {{ fabClassList.length }} 个</p>
        <p>regular（far 常规）: {{ farClassList.length }} 个（只修改type的值，将 type="fas" 修改成 type="far"，显示异常则不支持regular风格）</p>
        <p>共计 {{ fasClassList.length + farClassList.length + fabClassList.length }} 个</p>
        <div style="max-width: 600px; margin: 10px auto;">
          <p>下图截自官方文档：(regular官方pro版本支持，实际有一小部分是支持的)</p>
          <img style="border: 1px solid #333; width: 100%;" src="./images/fa.jpg" alt="官方免费图标风格" />
        </div>
        <h2>参数说明</h2>
        <table border="1">
          <thead>
            <tr>
              <th>参数</th>
              <th>说明</th>
              <th>类型</th>
              <th>默认值</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="prop in rocIconProps" :key="prop.param">
              <td>{{ prop.param }}</td>
              <td>{{ prop.desc }}</td>
              <td>{{ prop.type }}</td>
              <td>{{ prop.default }}</td>
            </tr>
        </table>
        <h2>使用示例</h2>
        <code>&lt;roc-icon-plus type="fas" name="hourglass-half" :size="20" color="#f99" :rotate="90" animationType="spin"&gt;&lt;/roc-icon-plus&gt;</code>
        <div>效果：<i class="fas fa-hourglass-half fa-rotate-90 fa-spin" style="font-size: 20px;color: #f99;"></i></div>
      </div>
      <h3 id="fas">solid（fas）</h3>
      <div class="icon-wrap">
        <div class="icon-item" v-for="faClass in fasClassList" :key="faClass">
          <i class="roc-icon fas" :class="faClass"></i>
          <p class="icon-name">{{ faClass.replace('fa-', '') }}</p>
          <div class="btn-box">
            <a href="javascript:;" @click="copy($event, faClass.replace('fa-', ''))">复制名称</a>
            <a href="javascript:;" @click="copyComponent($event, faClass.replace('fa-', ''), 'fas')">复制组件</a>
          </div>
        </div>
      </div>
      <!-- <h3>regular（far）</h3>
      <div class="icon-wrap">
        <div class="icon-item" v-for="faClass in farClassList" :key="faClass">
          <i class="roc-icon fa" :class="faClass"></i>
          <p class="icon-name">{{ faClass.replace('fa-', '') }}</p>
          <div class="btn-box">
            <a href="javascript:;" @click="copy($event, faClass.replace('fa-', ''))">复制名称</a>
            <a href="javascript:;" @click="copyComponent($event, faClass.replace('fa-', ''), 'far')">复制组件</a>
          </div>
        </div>
      </div> -->
      <h3 id="fab">brands（fab）</h3>
      <div class="icon-wrap">
        <div class="icon-item" v-for="faClass in fabClassList" :key="faClass">
          <i class="roc-icon fab" :class="faClass"></i>
          <p class="icon-name">{{ faClass.replace('fa-', '') }}</p>
          <div class="btn-box">
            <a href="javascript:;" @click="copy($event, faClass.replace('fa-', ''))">复制名称</a>
            <a href="javascript:;" @click="copyComponent($event, faClass.replace('fa-', ''), 'fab')">复制组件</a>
          </div>
        </div>
      </div>
    </div>
    </div>
    <script src="./js/vue.global.prod.js"></script>
    <script src="./js/fa.6.5.1.data.js"></script>
    <script src="./js/clipboard.js"></script>
    <script src="./js/toast.js"></script>
    <script>
      function setup() {
        const rocIconProps = [
          {
            param: 'type',
            desc: '类型，可选 fas far fab',
            type: 'String',
            default: 'fas',
          },
          {
            param: 'name',
            desc: '名称，去掉fa-',
            type: 'String',
            default: '必传',
          },
          {
            param: 'size',
            desc: '大小，单位px',
            type: 'Number | String',
            default: '16',
          },
          {
            param: 'color',
            desc: '颜色',
            type: 'String',
            default: '#606266',
          },
          {
            param: 'rotate',
            desc: '旋转，仅支持 90 180 270',
            type: 'Number | String',
            default: '无',
          },
          {
            param: 'animationType',
            desc: '动画类型，spin(平滑旋转) pulse(非平滑旋转) beat(心跳) fade(渐隐渐显) beat-fade(心跳+渐隐渐显) bounce(弹起) flip(翻转) shake(抖动)',
            type: 'String',
            default: '无',
          },
        ]
        /**
         * 复制组件代码
         */
        function copyComponent(event, text, type) {
          let cpn = ''
          if(type === 'fas') {
            cpn = `<roc-icon-plus name="${text}"></roc-icon-plus>`
          } else {
            cpn = `<roc-icon-plus type="${type}" name="${text}"></roc-icon-plus>`
          }
          copy(event, cpn)
        }
        /**
         * 复制
         */
        function copy(event, text) {
          const clipboard = new ClipboardJS(event.target, {
            text: () => text,
          });
          clipboard.on("success", () => {
            Toast(`复制成功 ${text}`)
            clipboard.destroy();
          });
          clipboard.on("error", () => {
            Toast(`复制失败 ${text}`)
            clipboard.destroy();
          });
          clipboard.onClick(event);
        }
        /**
         * 显示Toast
         * @param {string} msg 显示的文本
         * @param {number} duration 显示时间
         */
        function Toast(msg, duration) {
          duration = isNaN(duration) ? 1500 : duration;
          var m = document.createElement("div");
          m.innerText = msg;
          m.style.cssText =
            "max-width:60%;min-width: 150px;padding:0 14px;height: 40px;color: rgb(255, 255, 255);line-height: 40px;text-align: center;border-radius: 4px;position: fixed;top: 40%;left: 50%;transform: translate(-50%, -50%);z-index: 999999;background: rgba(0, 0, 0,.7);font-size: 16px;";
          document.body.appendChild(m);
          setTimeout(function () {
            var d = 0.5;
            m.style.webkitTransition = "-webkit-transform " + d + "s ease-in, opacity " + d + "s ease-in";
            m.style.opacity = "0";
            setTimeout(function () {
              document.body.removeChild(m);
            }, d * 1000);
          }, duration);
        }
        return {
          fasClassList: fasClassList.sort(),
          farClassList: farClassList.sort(),
          fabClassList: fabClassList.sort(),
          rocIconProps,
          copy,
          copyComponent,
        };
      }
      const app = Vue.createApp({ setup: setup });
      app.mount("#app");
    </script>
  </body>
</html>
